<!DOCTYPE html>
<!--[if lt IE 7]>

<html class="lt-ie9 lt-ie8 lt-ie7" lang="en">

<![endif]-->
<!--[if IE 7]>

<html class="lt-ie9 lt-ie8" lang="en">

<![endif]-->
<!--[if IE 8]>

<html class="lt-ie9" lang="en">

<![endif]-->
<!--[if gt IE 8]>
<!-->

<html lang="en">

    <!--
  <![endif]-->
    <head>
        <meta charset="utf-8">
        <title>
            Cofico - Phần Mềm Quản Lý Kho
        </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">
        <!-- bootstrap css -->
        <script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
        </script>
        <link href="icomoon/style.css" rel="stylesheet">
        <!--[if lte IE 7]>
        <script src="css/icomoon-font/lte-ie7.js">
        </script>
        <![endif]-->
        <link href="css/wysiwyg/bootstrap-wysihtml5.css" rel="stylesheet">
        <link href="css/wysiwyg/wysiwyg-color.css" rel="stylesheet">
        <link href="css/main.css" rel="stylesheet">
        <link href="css/charts-graphs.css" rel="stylesheet">
    </head>
    <body>
        <header>
            <a href="#" class="logo">
                <img src="img/LOGO_COFICO.png" style="width: 20%;" alt="logo" />
            </a>
            <div class="btn-group">
                <button class="btn btn-primary">
                    Admin
                </button>
                <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
                    <span class="caret">
                    </span>
                </button>
                <ul class="dropdown-menu pull-right">
                    <li>
                        <a href="#">
                            Edit Profile
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Account Settings
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Logout
                        </a>
                    </li>
                </ul>
            </div>
            <ul class="mini-nav">
                <li>
                    <a href="#">
                        <div class="fs1" aria-hidden="true" data-icon="&#xe040;"></div>
                        <span class="info-label badge badge-warning">
                            3
                        </span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <div class="fs1" aria-hidden="true" data-icon="&#xe04c;"></div>
                        <span class="info-label badge badge-info">
                            5
                        </span>
                    </a>
                </li>
            </ul>

        </header>
        <div class="container-fluid">
            <div class="dashboard-container">
                <div class="top-nav">
                    <ul>
                        <li>
                            <a href="index.html">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe19a;"></div>
                                Trang chủ
                            </a>
                        </li>
                        <li>
                            <a href="du-an.html">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe003;"></div>
                                Dự án
                            </a>
                        </li>
                        <li>
                            <a href="nha-cung-cap.html">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe0ab;"></div>
                                Nhà cung cấp
                            </a>
                        </li>
                        <li>
                            <a href="vat-tu.html">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe03b;"></div>
                                Vật tư
                            </a>
                        </li>
                        <li>
                            <a href="xuat-nhap.html">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe11d;"></div>
                                Xuất - Nhập
                            </a>
                        </li>
                        <li>
                            <a href="bao-cao.html" class="selected">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe14a;"></div>
                                Báo cáo
                            </a>
                        </li>
                        <li>
                            <a href="nguoi-dung.html">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe071;"></div>
                                Người dùng
                            </a>
                        </li>
                        <li>
                            <a href="lich-bieu.html">
                                <div class="fs1" aria-hidden="true" data-icon="&#xe052;"></div>
                                Lịch biểu
                            </a>
                        </li>
                    </ul>
                    <div class="clearfix">
                    </div>
                </div>
                <div class="sub-nav">
                    <ul>
                        <li><a href="" class="heading">Thông tin báo cáo nhập xuât và ngân sách cho từng dự án</a></li>
                        <!--<li>
                            <a href="#bao-cao-nhanh-1">
                                Báo cáo nhanh 1
                            </a>
                        </li>
                        <li>
                            <a href="#bao-cao-nhanh-2">
                                Báo cáo nhanh 2
                            </a>
                        </li>-->
                    </ul>
                    <div class="btn-group pull-right">
                        <button class="btn btn-primary">
                            Main Menu
                        </button>
                        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle">
                            <span class="caret">
                            </span>
                        </button>
                        <ul class="dropdown-menu pull-right">
                            <li>
                                <a href="index.html" data-original-title="">
                                    Trang chủ
                                </a>
                            </li>
                            <li>
                                <a href="#" data-original-title="">
                                    Dự án
                                </a>
                            </li>
                            <li>
                                <a href="#" data-original-title="">
                                    Nhà cung cấp
                                </a>
                            </li>
                            <li>
                                <a href="#" data-original-title="">
                                    Vật tư
                                </a>
                            </li>
                            <li>
                                <a href="#" data-original-title="">
                                    Xuất - Nhập
                                </a>
                            </li>
                            <li>
                                <a href="#" data-original-title="">
                                    Báo cáo
                                </a>
                            </li>
                            <li>
                                <a href="#" data-original-title="">
                                    Người dùng
                                </a>
                            </li>
                            <li>
                                <a href="lich-bieu.html" data-original-title="">
                                    Lịch biểu
                                </a>
                            </li>
                            <li>
                                <a href="help.html" data-original-title="">
                                    Trợ giúp
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="dashboard-wrapper">

                    <div class="left-sidebar">

                        <div class="row-fluid">
                            <div class="span12">
                                <div class="widget">
                                    <div class="widget-header">
                                        <div class="title">
                                            Nhập - Xuất
                                            <span class="mini-title">
                                                Biểu đồ giá trị nhập xuất trong 06 tháng gần nhất
                                            </span>
                                        </div>
                                    </div>
                                    <div class="widget-body">
                                        <div id="area_chart">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row-fluid">
                            <div class="span12">
                                <div class="widget">
                                    <div class="widget-header">
                                        <div class="title">
                                            Top 10 nhà cung cấp vật tư có giá trị
                                        </div>
                                    </div>
                                    <div class="widget-body">
                                        <div id="column_chart">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                    <div class="right-sidebar">

                        <div class="wrapper">
                            <ul class="stats">

                                <li>
                                    <a href="#">
                                        <div class="left">
                                            <h4>
                                                $92,288
                                            </h4>
                                            <p>
                                                Tổng giá trị Nhập
                                            </p>
                                        </div>
                                        <div class="chart">
                                            <span id="monthly-sales">
                                                3, 9, 8, 5, 3, 5, 2, 3, 4, 7
                                            </span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="left">
                                            <h4>
                                                $48,830
                                            </h4>
                                            <p>
                                                Tổng giá trị Xuất
                                            </p>
                                        </div>
                                        <div class="chart">
                                            <span id="current-balance">
                                                3, 5, 8, 5, 3, 5, 2, 9, 6, 8
                                            </span>
                                        </div>
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <div class="left">
                                            <h4>
                                                $148,830
                                            </h4>
                                            <p>
                                                Tổng ngân sách
                                            </p>
                                        </div>
                                        <div class="chart">
                                            <span id="unique-visitors">
                                                2, 4, 1, 7, 9, 8, 2, 3, 5, 6
                                            </span>
                                        </div>
                                    </a>
                                </li>

                            </ul>
                        </div>

                        <hr class="hr-stylish-1">


                        <div class="wrapper">
                            <div id="scrollbar">
                                <div class="scrollbar">
                                    <div class="track">
                                        <div class="thumb">
                                            <div class="end">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="viewport">
                                    <div class="overview">
                                        <div class="featured-articles-container">
                                            <h5 class="heading">
                                                Lần truy cập gần nhất
                                            </h5>
                                            <div class="articles">
                                                <a href="#">
                                                    <span class="label-bullet">
                                                        &nbsp;
                                                    </span>
                                                    Login IP: 192.168.1.1
                                                    Mon 16/10/2014 06:38 PM
                                                </a>
                                            </div>

                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/.fluid-container-->
        </div>

        <script src="js/wysiwyg/wysihtml5-0.3.0.js">
        </script>
        <script src="js/jquery.min.js">
        </script>
        <script src="js/bootstrap.js">
        </script>
        <script src="js/wysiwyg/bootstrap-wysihtml5.js">
        </script>
        <script src="js/jquery.scrollUp.js">
        </script>


        <!-- Google Visualization JS -->
        <script type="text/javascript" src="https://www.google.com/jsapi">
        </script>

        <!-- Easy Pie Chart JS -->
        <script src="js/jquery.easy-pie-chart.js">
        </script>

        <!-- Sparkline JS -->
        <script src="js/jquery.sparkline.js">
        </script>

        <!-- Tiny Scrollbar JS -->
        <script src="js/tiny-scrollbar.js">
        </script>



        <script type="text/javascript">
            //ScrollUp
            $(function() {
                $.scrollUp({
                    scrollName: 'scrollUp', // Element ID
                    topDistance: '300', // Distance from top before showing element (px)
                    topSpeed: 300, // Speed back to top (ms)
                    animation: 'fade', // Fade, slide, none
                    animationInSpeed: 400, // Animation in speed (ms)
                    animationOutSpeed: 400, // Animation out speed (ms)
                    scrollText: 'Scroll to top', // Text for element
                    activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
                });
            });

            //Google Visualiations
            google.load("visualization", "1", {
                packages: ["corechart"]
            });
            google.setOnLoadCallback(drawChart);
            google.setOnLoadCallback(drawChart2);
            google.setOnLoadCallback(drawChart3);
            google.setOnLoadCallback(drawChart4);
            function drawChart() {
                var data = google.visualization.arrayToDataTable([
                    ['Time', ' Giá trị nhập', 'Giá trị xuất'],
                    ['Apr', 19709, 16761],
                    ['May', 21367, 18631],
                    ['June', 16792, 9971],
                    ['July', 11267, 7491],
                    ['Aug', 9539, 5792],
                    ['Sep', 8670, 9367],
                    ['Oct', 24761, 16809]
                ]);

                var options = {
                    width: 'auto',
                    height: '160',
                    backgroundColor: 'transparent',
                    colors: ['#ed6d49', '#0daed3'],
                    tooltip: {
                        textStyle: {
                            color: '#666666',
                            fontSize: 11
                        },
                        showColorCode: true
                    },
                    legend: {
                        textStyle: {
                            color: 'black',
                            fontSize: 12
                        }
                    },
                    chartArea: {
                        left: 100,
                        top: 10
                    },
                    focusTarget: 'category',
                    hAxis: {
                        textStyle: {
                            color: 'black',
                            fontSize: 12
                        }
                    },
                    vAxis: {
                        textStyle: {
                            color: 'black',
                            fontSize: 12
                        }
                    },
                    pointSize: 6,
                    chartArea: {
                        left: 60,
                        top: 10,
                        height: '80%'
                    },
                    lineWidth: 1,
                };

                var chart = new google.visualization.LineChart(document.getElementById('area_chart'));
                chart.draw(data, options);
            }


            //Tooltip
            $('a').tooltip('hide');
            $('i').tooltip('hide');


            //Tiny Scrollbar
            $('#scrollbar').tinyscrollbar();
            $('#scrollbar-one').tinyscrollbar();
            $('#scrollbar-two').tinyscrollbar();
            $('#scrollbar-three').tinyscrollbar();



            //Tabs
            $('#myTab a').click(function(e) {
                e.preventDefault();
                $(this).tab('show');
            })

            // SparkLine Graphs-Charts
            $(function() {
                $('#unique-visitors').sparkline('html', {
                    type: 'bar',
                    barColor: '#ed6d49',
                    barWidth: 6,
                    height: 30,
                });
                $('#monthly-sales').sparkline('html', {
                    type: 'bar',
                    barColor: '#74b749',
                    barWidth: 6,
                    height: 30,
                });
                $('#current-balance').sparkline('html', {
                    type: 'bar',
                    barColor: '#ffb400',
                    barWidth: 6,
                    height: 30,
                });
                $('#registrations').sparkline('html', {
                    type: 'bar',
                    barColor: '#0daed3',
                    barWidth: 6,
                    height: 30,
                });
                $('#site-visits').sparkline('html', {
                    type: 'bar',
                    barColor: '#f63131',
                    barWidth: 6,
                    height: 30,
                });
            });

            //wysihtml5
            $('#wysiwyg').wysihtml5();

            //graph input
            $(document).ready(function() {
                pie_chart();
                sparkline_graphs();
            });

            function pie_chart() {
                $(function() {
                    //create instance
                    $('.chart1').easyPieChart({
                        animate: 2000,
                        barColor: '#74b749',
                        trackColor: '#dddddd',
                        scaleColor: '#74b749',
                        size: 180,
                        lineWidth: 5,
                    });
                    //update instance after 5 sec
                    setTimeout(function() {
                        $('.chart1').data('easyPieChart').update(50);
                    }, 5000);
                    setTimeout(function() {
                        $('.chart1').data('easyPieChart').update(70);
                    }, 10000);
                    setTimeout(function() {
                        $('.chart1').data('easyPieChart').update(30);
                    }, 15000);
                    setTimeout(function() {
                        $('.chart1').data('easyPieChart').update(90);
                    }, 19000);
                    setTimeout(function() {
                        $('.chart1').data('easyPieChart').update(40);
                    }, 32000);
                });

                $(function() {
                    //create instance
                    $('.chart2').easyPieChart({
                        animate: 2000,
                        barColor: '#ed6d49',
                        trackColor: '#dddddd',
                        scaleColor: '#ed6d49',
                        size: 180,
                        lineWidth: 5,
                    });
                    //update instance after 5 sec
                    setTimeout(function() {
                        $('.chart2').data('easyPieChart').update(90);
                    }, 10000);
                    setTimeout(function() {
                        $('.chart2').data('easyPieChart').update(40);
                    }, 18000);
                    setTimeout(function() {
                        $('.chart2').data('easyPieChart').update(70);
                    }, 28000);
                    setTimeout(function() {
                        $('.chart2').data('easyPieChart').update(50);
                    }, 32000);
                    setTimeout(function() {
                        $('.chart2').data('easyPieChart').update(80);
                    }, 40000);
                });

                $(function() {
                    //create instance
                    $('.chart3').easyPieChart({
                        animate: 2000,
                        barColor: '#0daed3',
                        trackColor: '#dddddd',
                        scaleColor: '#0daed3',
                        size: 180,
                        lineWidth: 5,
                    });
                    //update instance after 5 sec
                    setTimeout(function() {
                        $('.chart3').data('easyPieChart').update(20);
                    }, 9000);
                    setTimeout(function() {
                        $('.chart3').data('easyPieChart').update(59);
                    }, 20000);
                    setTimeout(function() {
                        $('.chart3').data('easyPieChart').update(38);
                    }, 35000);
                    setTimeout(function() {
                        $('.chart3').data('easyPieChart').update(79);
                    }, 49000);
                    setTimeout(function() {
                        $('.chart3').data('easyPieChart').update(96);
                    }, 52000);
                });

                $(function() {
                    //create instance
                    $('.chart4').easyPieChart({
                        animate: 2000,
                        barColor: '#ffb400',
                        trackColor: '#dddddd',
                        scaleColor: '#ffb400',
                        size: 180,
                        lineWidth: 5,
                    });
                    //update instance after 5 sec
                    setTimeout(function() {
                        $('.chart4').data('easyPieChart').update(40);
                    }, 6000);
                    setTimeout(function() {
                        $('.chart4').data('easyPieChart').update(67);
                    }, 14000);
                    setTimeout(function() {
                        $('.chart4').data('easyPieChart').update(43);
                    }, 23000);
                    setTimeout(function() {
                        $('.chart4').data('easyPieChart').update(80);
                    }, 36000);
                    setTimeout(function() {
                        $('.chart4').data('easyPieChart').update(66);
                    }, 41000);
                });


                $(function() {
                    //create instance
                    $('.chart5').easyPieChart({
                        animate: 3000,
                        barColor: '#F63131',
                        trackColor: '#dddddd',
                        scaleColor: '#F63131',
                        size: 180,
                        lineWidth: 5,
                    });
                    //update instance after 5 sec
                    setTimeout(function() {
                        $('.chart5').data('easyPieChart').update(30);
                    }, 9000);
                    setTimeout(function() {
                        $('.chart5').data('easyPieChart').update(87);
                    }, 19000);
                    setTimeout(function() {
                        $('.chart5').data('easyPieChart').update(28);
                    }, 27000);
                    setTimeout(function() {
                        $('.chart5').data('easyPieChart').update(69);
                    }, 39000);
                    setTimeout(function() {
                        $('.chart5').data('easyPieChart').update(99);
                    }, 47000);
                });


            }


            function sparkline_graphs() {
                $(function() {
                    $('#stock-graph').sparkline('html', {
                        type: 'bar',
                        barColor: '#0daed3',
                        barWidth: 7,
                        height: 38,
                    });
                });
            }


            google.load("visualization", "1", {
                packages: ["corechart"]
            });

            $(document).ready(function() {
                drawChart2();
                drawChart3();
                drawChart4();
            })



            function drawChart2() {
                var data = google.visualization.arrayToDataTable([
                    ['Week', 'Visitors', 'Orders'],
                    ['Sun', 9709, 761],
                    ['Mon', 1367, 8631],
                    ['Tue', 6792, 971],
                    ['Wed', 1267, 7491],
                    ['Thu', 9539, 1792],
                    ['Fri', 670, 9367],
                    ['Sat', 9761, 709]
                ]);

                var options = {
                    width: 'auto',
                    height: '160',
                    backgroundColor: 'transparent',
                    colors: ['#ed6d49', '#0daed3'],
                    tooltip: {
                        textStyle: {
                            color: '#666666',
                            fontSize: 11
                        },
                        showColorCode: true
                    },
                    legend: {
                        textStyle: {
                            color: 'black',
                            fontSize: 12
                        }
                    },
                    chartArea: {
                        left: 100,
                        top: 10
                    },
                    focusTarget: 'category',
                    hAxis: {
                        textStyle: {
                            color: 'black',
                            fontSize: 12
                        }
                    },
                    vAxis: {
                        textStyle: {
                            color: 'black',
                            fontSize: 12
                        }
                    },
                    pointSize: 6,
                    chartArea: {
                        left: 60,
                        top: 10,
                        height: '80%'
                    },
                    lineWidth: 1,
                };

                var chart = new google.visualization.LineChart(document.getElementById('line_chart'));
                chart.draw(data, options);
            }


            function drawChart3() {
                var data = google.visualization.arrayToDataTable([
                    ['Dự Án', 'Nhập', 'Xuất', 'Lợi nhuận'],
                    ['Vista Verde', 9800, 9900, 11500],
                    ['The Prince', 8170, 8860, 13208],
                    ['Mia Resort', 12870, 12340, 26230],
                    ['SaigonBank', 8030, 8200, 15069],
                    ['Nissin Foods', 12700, 12770, 33889],
                    ['SunSteel', 8170, 6160, 16069], ]);

                var options = {
                    width: 'auto',
                    height: '160',
                    backgroundColor: 'transparent',
                    colors: ['#ed6d49', '#0daed3', '#ffb400', '#74b749', '#f63131'],
                    tooltip: {
                        textStyle: {
                            color: '#666666',
                            fontSize: 11
                        },
                        showColorCode: true
                    },
                    legend: {
                        textStyle: {
                            color: 'black',
                            fontSize: 12
                        }
                    },
                    chartArea: {
                        left: 60,
                        top: 10,
                        height: '80%'
                    },
                };

                var chart = new google.visualization.ColumnChart(document.getElementById('column_chart'));
                chart.draw(data, options);
            }

            function drawChart4() {
                var data = google.visualization.arrayToDataTable([
                    ['Task', 'Hours per Day'],
                    ['Eat', 2],
                    ['Work', 10],
                    ['Commute', 2],
                    ['Read', 2],
                    ['Sleep', 8]
                ]);

                var options = {
                    width: 'auto',
                    height: '160',
                    backgroundColor: 'transparent',
                    colors: ['#ed6d49', '#74b749', '#0daed3', '#ffb400', '#f63131'],
                    tooltip: {
                        textStyle: {
                            color: '#666666',
                            fontSize: 11
                        },
                        showColorCode: true
                    },
                    legend: {
                        position: 'left',
                        textStyle: {
                            color: 'black',
                            fontSize: 12
                        }
                    },
                    chartArea: {
                        left: 0,
                        top: 10,
                        width: "100%",
                        height: "100%"
                    }
                };

                var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
                chart.draw(data, options);
            }
        </script>


    </body>
</html>